<template>
  <div class="login-container">
    <div class="login-header">
      <div class="logo-header">
        <div class="icon">
          <image src="../../assets/images/lplogo.jpg"></image>
        </div>
      </div>
      <div class="logo-title">良票</div>
    </div>
    <div class="logo-form-box">
      <nut-form :model-value="formData" ref="ruleForm" label-position="top">
        <div style="height: 10px"></div>
        <div style="margin-left: 20px; font-size: 15px; color: #858a99">
          账号:
        </div>
        <nut-form-item
          prop="tel"
          :rules="[{ required: true, message: '请填写用户名' }]"
        >
          <nut-input
            class="nut-input-text"
            v-model="formData.tel"
            placeholder="手机号"
            type="text"
            clearable
          >
            <template #left>
              <IconFont
                font-class-name="iconfont"
                class-prefix="icon"
                name="zhanghao"
                size="18"
                color="#15181d"
              ></IconFont>
            </template>
          </nut-input>
        </nut-form-item>
        <div style="margin-left: 20px; font-size: 15px; color: #858a99">
          密码:
        </div>
        <nut-form-item
          prop="password"
          :rules="[{ required: true, message: '请填写密码' }]"
        >
          <nut-input
            class="nut-input-text"
            v-model="formData.password"
            placeholder="请输入密码"
            :type="passwordVisible ? 'text' : 'password'"
          >
            <template #left>
              <IconFont
                font-class-name="iconfont"
                class-prefix="icon"
                name="mima"
                size="18"
                color="#15181d"
              ></IconFont>
            </template>
            <template #right>
              <IconFont
                name="eye"
                size="10"
                v-if="passwordVisible"
                @click="passwordVisible = !passwordVisible"
              ></IconFont>
              <IconFont
                size="10"
                name="marshalling"
                v-else
                @click="passwordVisible = !passwordVisible"
              ></IconFont>
              >
            </template>
          </nut-input>
        </nut-form-item>
        <div style="height: 10px"></div>
      </nut-form>
      <div class="login-btn">
        <nut-button
          color="linear-gradient(to right, #5232B7,#7237BC)"
          block
          style="margin-right: 10px"
          @click="submit"
          >登 录</nut-button
        >
        <div
          style="
            justify-content: space-between;
            align-items: center;
            display: flex;
            margin-top: 10px;
          "
        >
          <!-- <nut-button
            color="linear-gradient(to right, #5232B7,#7237BC)"
            size="mini"
            plain
            @click="wxLogin"
            >微信快捷登录</nut-button
          > -->
          <div style="color: #5232b7; font-size: 14px" @click="wxLogin">
            微信快捷登录(注册)>
          </div>

          <div style="color: #5232b7; font-size: 14px" @click="forgetPassword">
            忘记密码?
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { IconFont } from "@nutui/icons-vue-taro";
import * as loginApi from "../../api/loginApi";
import { storeToRefs } from "pinia";
import { useUserStore } from "../../store";
const userStore = useUserStore();
const { Token, Userinfo } = storeToRefs(userStore);
import Taro from "@tarojs/taro";
const router = Taro.useRouter();
//登录表单
const formData = reactive({
  tel: "",
  password: "",
});
const passwordVisible = ref(false);
const ruleForm = ref(null);
onMounted(() => {
  if (Token.value && Userinfo.value) {
    Taro.redirectTo({
      url: "/pages/index/index",
    });
  }
});
//提交登录
const submit = () => {
  ruleForm.value.validate().then(async ({ valid, errors }) => {
    if (valid) {
      const data = {
        userName: formData.tel,
        password: formData.password,
        userTypeEnum: "Consume",
      };
      const userRes: any = await loginApi.FormdataLogin(data);
      if (userRes.state == 200) {
        userStore.setToken(userRes.token);
        userStore.setUserinfo(userRes.data);
        Taro.setStorageSync("userInfo", userRes.data);
        Taro.redirectTo({ url: "/pages/index/index" });
      } else {
        Taro.showToast({
          title: userRes.message,
          icon: "none",
          duration: 3000,
        });
      }
    } else {
    }
  });
};
//忘记密码 进入修改密码页面
const forgetPassword = () => {
  Taro.navigateTo({ url: "/pages/forget-password/index" });
};
//微信快捷登录
const wxLogin = async () => {
  Taro.redirectTo({ url: "/pages/index/index" });
};
</script>
<style lang="less">
.login-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 150px 10px;
  .login-header {
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .logo-header {
      .icon {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .logo-title {
      font-size: 32px;
      margin-top: 10px;
    }
  }
  .tip-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    .tip1 {
      color: #858a99;
    }
    .tip2 {
      color: #5232b7;
      margin-left: 10px;
      font-size: 26px;
    }
  }
  .logo-form-box {
    .nut-input-left-box {
      margin-right: 20px;
    }
    .nut-input-text {
      border: 1px solid #ccc;
      padding: 20px;
      border-radius: 10px;
    }
    .login-btn {
      padding: 20px;
    }
  }
}
</style>
